/*
 * Fonts
 */
@font-face {
    font-family: 'fontello';
    src: url('/font/fontello.eot');
    src: url('/font/fontello.eot#iefix') format('embedded-opentype'), url('/font/fontello.woff') format('woff'), url('/font/fontello.ttf') format('truetype'), url('/font/fontello.svg') format('svg');
    font-weight: normal;
    font-display: 'auto';
    font-style: normal;
}

// Variables
$font-stack: "Oxygen", sans-serif;
$font-monospace: "Roboto Mono", monospace;
$primary-text-color: #3c4043;
$primary-color: #08c;
$color-white: #fff;
$code-highlight-color: #d44950;


/*
 * Scaffolding and type
 */
html {
    font-size: 1rem;
}

@media (min-width: 40em) {
    html {
        font-size: 1.2rem;
    }
}

img {
    width: 100%;
}

body {
    margin: 0;
    font: 1.0rem/1.5 $font-stack;
    color: $primary-text-color;
    min-height: 100vh;
}

hr {
    border: 1px solid #eee;
    margin: 4em 0;
}

a {
    color: $primary-color;
    text-decoration: none;

    &:hover {
        text-decoration: none;
        color: lighten($primary-color, 15%);
        transition: color .15s ease-in;
    }
}

picture {
    text-align: center;
    .caption {
        font-size: 0.7em;
        margin-top: 0;
    }
}

h1,
h2,
h3,
h4 {
    font-weight: normal;
    line-height: 1;
}

h1 {
    font-size: 2.7rem;
}

h2 {
    font-size: 1.5rem;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1.2px;
}

h3 {
    padding-top: 1rem;
    margin-top: 2rem;
    font-size: 1.35rem;
}

h4 {
    font-size: 1.25rem
}

.lead {
    font-size: 1.3rem;
}

blockquote {
    position: relative;
    padding: 0.5rem 1rem 0.5rem;
    font-style: italic;
    color: lighten($primary-text-color, 25%);
    border-left: 8px solid #eee;
    margin: 0;
    margin: 1.5rem 0;
}

blockquote p {
    margin-bottom: 0;
}

/* Tighten up margin on last items */

p:last-child,
ul:last-child,
blockquote:last-child {
    margin-bottom: 0;
}

/*
 * Code
 */

code,
pre {
    font-family: $font-monospace;
    font-size: 85%;
}

code {
    padding: 2px 4px;
    color: $code-highlight-color;
    background-color: #f7f7f9;
    border-radius: .2rem;
}

/*
 * The Grid
 */

.container {
    max-width: 40rem;
    margin-left: 30%;
    margin-right: auto;
    padding: 0 2.4em;
}

/*
 * Side-nav
 */
nav#menu {
    display: flex;
    order: -1;
    background: #f8f9fa;
    position: fixed;
    left: 0;
    overflow-y: auto;
    top: 0;
    bottom: 0;
    flex: 0 0 auto;
    border-right: 1px solid #d2d3d4;
    z-index: 100;
    max-width: 30%;
    flex-direction: column;
    justify-content: space-between; 

    // close button for collapsible nav
    #close {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 80px;
        line-height: 78px;
        text-align: center;
        font-size: 3em;
        text-decoration: none;
        color: #fff;
    }

    ul {
        list-style-type: none;
        padding-left: 1rem;
    }

    &>ol {
        padding: 8px;
        list-style-type: none;
        font-size: 14px;

        &>li {
            margin: 1rem 0.5rem;
        }
    }

    // footer
    footer {
        text-align: center;
        padding: 0.3rem 0;
    }
}

#hamburger-btn {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100px;
    height: 80px;
    background: 0 0;
    color: $primary-color;
    line-height: 78px;
    text-align: center;
    font-size: 4em;
}

/*
 * Masthead
 */
.masthead {
    padding-bottom: 2rem;
    border-bottom: 1px solid #eee;
    h1 {
        margin-bottom: .25rem;
    }
    a:hover {
        text-decoration: none;
    }
    i.demo-icon {
        font-family: "fontello";
        font-style: normal;
        font-weight: normal;
        display: inline-block;
        text-decoration: inherit;
        width: 1em;
        margin-right: .2em;
        text-align: center;
        font-variant: normal;
        text-transform: none;
        line-height: 1em;
        margin-left: .2em;
        font-size: 120%;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/**
 * Responsive
 */
/* below 767px (iPad size) */
@media screen and (max-device-width : 768px), screen and (max-width : 768px), print {
    .container {
        margin-left: auto;
    }

    nav#menu {
        left: -100%;
        max-width: 80%;
        overflow-y: auto;
        z-index: 100;
        -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);

        #close {
            display: block;
            font-size: 2.2em;
            line-height: 60px;
            width: 60px;
        }
    }

    nav#menu:target {
        background: #08c;
        border: 0;
        color: white;
        left: 0;
        transition: left 0.3s;
    }

    nav a {
        color: white;
        text-decoration: none;
    }


    nav ol>li {
        padding: 0.8rem 0;
    }

    #hamburger-btn {
        display: block;
        width: 40px;
        text-decoration: none;
        height: 80px;
        line-height: 65px;
        font-size: 2em;
    }
}


/**
 *  Styles for code highlighting
 */

.hljs-comment,
.hljs-quote {
    color: #969896
}

.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
    color: #d54e53
}

.hljs-number,
.hljs-built_in,
.hljs-builtin-name,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
    color: #e78c45
}

.hljs-attribute {
    color: #e7c547
}

.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
    color: #b9ca4a
}

.hljs-title,
.hljs-section {
    color: #7aa6da
}

.hljs-keyword,
.hljs-selector-tag {
    color: #c397d8
}

.hljs {
    display: block;
    overflow-x: auto;
    background: black;
    color: #eaeaea;
    padding: 0.5em
}

.hljs-emphasis {
    font-style: italic
}

.hljs-strong {
    font-weight: bold
}